<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<uni-data-select
			v-model="selectMode"
			:localdata="modeList"
			:clear="false"
			placeholder="请选择工作模式"
		></uni-data-select>
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="box" style="display: flex;" v-if="selectMode !== 3">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.containerCode" 
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialCode" style="display: flex;" v-if="selectMode === 3">
				<span style="margin-right: 20rpx;">物料号</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.materialCode"
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialBatch" style="display: flex;" v-if="selectMode === 3">
				<span style="margin-right: 20rpx;">批次号</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.materialBatch"
					@confirm="getMoreInfo"
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="storage" style="display: flex;" v-if="selectMode !== 2">
				<span style="margin-right: 20rpx;">储位码</span>
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.storageCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="storage" style="display: flex;" v-if="selectMode === 3">
				<span style="margin-right: 50rpx;">数量</span>
				<u--input 
					type="number"
					placeholder="请输入/扫描" 
					v-model="query.quantity" 
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
		</u--form>
		<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0" v-if="selectMode === 1">
			<uni-tr>
				<uni-th width="40rpx">起点</uni-th>
				<uni-th width="40rpx">终点</uni-th>
				<uni-th width="30rpx">容器</uni-th>
				<uni-th width="10rpx"></uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in bindTips" :key="index">
				<uni-td style="font-size: 22rpx;" class="selectable">{{ item.source }}</uni-td>
				<uni-td style="font-size: 22rpx;" class="selectable">{{ item.destination }}</uni-td>
				<uni-td style="font-size: 22rpx;" class="selectable">{{ item.containerCode }}</uni-td>
				<uni-td><u-icon v-if="item.missionStatus !== 0" name="checkbox-mark" color="#5ac725"></u-icon></uni-td>
			</uni-tr>
		</uni-table>
		<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0" v-else-if="selectMode === 3">
			<uni-tr>
				<uni-th width="40">已入库数量</uni-th>
				<uni-th width="40">入库单数量</uni-th>
				<uni-th width="40">目标储位</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tips" :key="index">
				<uni-td>{{ item.realQty ? item.realQty : 0 }}</uni-td>
				<uni-td>{{ item.InboundOrderQty ? item.InboundOrderQty : 0 }}</uni-td>
				<uni-td class="selectable">{{ item.storage ? item.storage : '' }}</uni-td>
			</uni-tr>
		</uni-table>
		<view v-if="selectMode === 1" class="buttonStyle">
			<u-button type="primary" text="确认绑定" @click="checkContainer"></u-button>
			<u-button type="error" text="料箱紧急入库" @click="emergency"></u-button>
			<u-button type="warning" text="重置" @click="reset"></u-button>
		</view>
		<view v-else-if="selectMode === 2" class="buttonStyle">
			<u-button type="primary" @click="unBindSubmit">确认解绑</u-button>
			<u-button type="warning" @click="reset">重置</u-button>
		</view>
		<view v-else class="buttonStyle">
			<u-button type="primary" @click="largeSubmit">确认绑定</u-button>
			<u-button type="warning" @click="reset">重置</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal 
			:show="dialogVisible"
			:title="title"
			:content='content'
			:showCancelButton='true'
			@cancel="dialogVisible = false"
			@confirm="bindSubmit"
		></u-modal>
		<u-modal
			:show="toastVisible"
			title="提示"
			:content='toastContent'
			:showCancelButton='false'
			@confirm="toastClose"
		></u-modal>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { getMoreInfoAPI, bindAPI } from '@/api/work/inbound.js'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	import { bindStorageAPI, checkContainerAPI, getBoxInboundMissionAPI, checkEmptyAPI } from '@/api/work/storage.js'
	import { unbindStorageAPI } from '@/api/work/storage.js'
	import { emergencyAPI } from '@/api/work/callCar.js'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: '',
					storageCode: '',
					materialCode: '',
					materialBatch: '',
					quantity: ''
				},
				dialogVisible: false,
				toastVisible: false,
				show:false,
				title:'提示',
				content: null,
				toastContent: null,
				selectMode: 1,
				tips: [],
				modeList: [
					{
						value: 1,
						text: '储位绑定'
					},
					{
						value: 2,
						text: '储位解绑'
					},
					{
						value: 3,
						text: '无容器绑定'
					}
				],
				bindTips: []
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		mounted() {
			this.getBoxInboundMission()
		},
		methods: {
			getCode(code) {
				const pattern = /^[A-Za-z]\d{9}$/
				if (code.length === 18) {
					this.getMoreInfo()
				} else if (pattern.test(code)) {
					this.query.containerCode = code
					if (this.selectMode === 1) {
						this.checkEmpty()
					}
				} else if (code.includes('-')) {
					this.query.storageCode = code
				} else if (/^VM/.test(code)) {
					this.query.materialBatch = code
				}
				if (this.query.materialCode && this.query.materialBatch && this.selectMode === 3) {
					this.getMoreInfo()
				}
			},
			reset() {
				this.query = {
					containerCode: '',
					storageCode: '',
					materialCode: '',
					materialBatch: '',
					quantity: ''
				}
				this.content = null
				this.tips = []
				this.dialogVisible = false
				this.getBoxInboundMission()
			},
			toastClose() {
				this.toastVisible = false
				this.toastContent = null
			},
			async checkEmpty() {
				const res = await checkEmptyAPI(this.query.containerCode)
				if (res.meta.code === 200) {
					return
				} else if (res.meta.code ===201) {
					this.toastVisible = true
					this.toastContent = res.meta.msg
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
					return
				}
			},
			async getMoreInfo() {
				const submitForm = {
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch
				}
				const res = await getMoreInfoAPI(submitForm)
				if (res.meta.code === 200) {
					if (!this.query.materialBatch) {
						this.query.materialBatch = res.data.materialBatch
					}
					const data = {
						realQty: res.data.realQty,
						InboundOrderQty: res.data.InboundOrderQty,
						storage: null
					}
					if (this.tips.length > 0) {
						this.tips[0] = data
					} else {
						this.tips.push(data)
					}
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			// 储位绑定
			async bindSubmit() {
				const res = await bindStorageAPI({
					containerCode: this.query.containerCode,
					storageCode: this.query.storageCode
				})
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
					this.reset()
					return
				} else {
					this.dialogVisible = false
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
					return
				}
			},
			async checkContainer() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器编码'
					})
				}
				if (this.query.containerCode && !this.query.storageCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描储位码'
					})
				}
				const res = await checkContainerAPI(this.query.containerCode)
				if (res.meta.code === 200) {
					if (res.data.pre === 0) {
						this.bindSubmit()
						return
					} else {
						this.content = res.meta.msg
						this.dialogVisible = true
					}
				}
			},
			// 储位解绑
			async unBindSubmit() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描容器编码'
					})
				}
				const res = await unbindStorageAPI(this.query)
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.reset()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			// 大件绑定
			async largeSubmit() {
				if (!this.query.materialCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描物料码'
					})
				}
				if (this.query.materialCode && !this.query.materialBatch) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描批次号'
					})
				}
				if (this.query.materialCode && this.query.materialBatch && !this.query.storageCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描储位码'
					})
				}
				if (this.query.materialCode && this.query.materialBatch && this.query.storageCode && !this.query.quantity) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请填写数量'
					})
				}
				if (!/^\d+$/.test(this.query.quantity)) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '数量必须为数字且大于等于0'
					})
				}
				const res = await bindAPI({
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch,
					targetStorageCode: this.tips.targetStorage,
					quantity: this.query.quantity
				})
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
					this.reset()
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async emergency() {
				const res = await emergencyAPI()
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.reset()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			// 获取料箱入库API
			async getBoxInboundMission() {
				const res = await getBoxInboundMissionAPI()
				if (res.meta.code === 200) {
					this.bindTips = res.data.missions
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.buttonStyle {
	display: flex;
	gap: 20rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;bottom: 0;
	padding: 10rpx;
	width: 100%;
	background-color: #fff;
}
.selectable {
	user-select: text; /* 确保内容可选 */
}
</style>
